<template>
    <ul v-show="totalCount" class="pagination flex-center">
        <li>
            当前第<strong>{{ pageNo }}</strong>页 | 
            共 <strong>{{ totalPage }}</strong> 页 | 
            共 <strong>{{ totalCount }}</strong> 条记录
        </li>
        <li @click="pageTurn(1)">首页</li>
        <li @click="pageTurn(pageNo - 1)">上一页</li>
        <li @click="pageTurn(pageNo + 1)">下一页</li>
        <li @click="pageTurn(totalPage)">末页</li>
        <li>
            <span>跳转到第</span>
            <input type="number" name="no" v-model="toPageNo" min="1" :max="totalPage"/>
            <span>页</span>
            <button @click="pageTurn(toPageNo)">确定</button>
        </li>
    </ul>
</template>

<script>
    /**
     * 分页组件
     */
    export default {
        props: {
            /**
             * 当前页码
             */
            pageNo: {
                type: Number,
            },
            /**
             * 页容量
             */
            pageSize: {
                type: Number,
            },
            /**
             * 数据总条数
             */
            totalCount: {
                type: Number, 
            },
            /**
             * 总页数
             */
            totalPage: {
                type: Number,
            }
        },
        data() {
            return {
                toPageNo: 1
            }
        },
        methods: {
            /**
             * 翻页
             */
            pageTurn(pageNo) {
                if (pageNo <= 0 || pageNo > this.totalPage || pageNo == this.pageNo) {
                    return;
                }
                this.$emit('pageTurn', pageNo);
            }
        },
        watch: {
            pageNo() {
                this.toPageNo = this.pageNo;
            }
        }
    }
</script>

<style lang="less" scoped>
    .pagination {
        min-height: 10%;
        max-height: 10%;
    }
    li {
        min-width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 10px;
        padding: 0 10px;
        border-radius: 4px;
        border: 1px solid;
        border-color: var(--color-grey);
        font-size: 14px;
        color: #000;
        cursor: pointer;
        user-select: none;
        &:nth-child(2):hover,
        &:nth-child(3):hover,
        &:nth-child(4):hover, 
        &:nth-child(5):hover {
            background-color: var(--color-primary);
            color: #fff;
            border-color: var(--color-primary);
        }
        &:last-child {
            padding-right: 0;
            padding-left: 5px;
            span {
                padding: 0 5px;
            }
            button {
                height: 40px;
                border: 1px solid var(--color-primary);
                background-color: var(--color-primary);
                color: #fff;
                padding: 0 10px;
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
                border-left: none;
                cursor: pointer;
                margin-right: -1px;
            }
            input[type="number"] {
                border: none;
                border-left: 1px solid var(--color-grey);
                padding-left: 10px;
                width: 70px;
                height: 100%;
                outline-color: var(--color-primary);
                &::-webkit-outer-spin-button,
                &::-webkit-inner-spin-button {
                    height: 40px;
                    width: 40px;
                    cursor: pointer;
                    margin-left: 10px;
                }
            }
        }
    }
    strong {
        padding: 0 5px;
        font-weight: bold;
    }
</style>